<script setup>
import { ref } from 'vue'
const popup = ref(null)
function generateEndTimeString() {
  const now = new Date() // 获取当前日期和时间

  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0') // 月份从0开始，所以要加1
  const day = now.getDate().toString().padStart(2, '0')
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')

  // 拼接成所需的字符串格式
  return `${year}-${month}-${day}+${hours}:${minutes}:${seconds}`
}
async function open() {
  popup.value.open()
  const endTime = generateEndTimeString()
  const url = `/worm/deviceData/getWormDataPagingList?deviceAddr=1127240040&beginTime=2024-07-24+14:47:51&endTime=${endTime}&limit=2&pages=1`
  try {
    const resp = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        token: localStorage.getItem('token') || '',
      },
    })
    const res = await resp.json()
    data.value = res.data.rows
    data.value.forEach((item) => {
      item.analyseData = JSON.parse(item.analyseData)
      item.imagesUrl = item.imagesUrl.replace('http://images.auto.0531yun.cn', '')
    })
    console.log('虫情测报灯数据', data.value)
  } catch (error) {
    console.error('Error fetching data:', error)
    data.value = [
      {
        imagesUrl:
          '/api/profile/upload/assets/bug1.jpg',
        analyseData: [{ num: 0, type: 0, name: '暂无昆虫' }],
      },
      {
        imagesUrl:
          '/api/profile/upload/assets/bug2.jpg',
        analyseData: [{ num: 1, type: 1, name: '硬壳虫' }],
      },
    ]
  }
}
const data = ref([
  {
    imagesUrl:
      '/api/profile/upload/assets/bug1.jpg',
    analyseData: [{ num: 0, type: 0, name: '暂无昆虫' }],
  },
  {
    imagesUrl:
      '/api/profile/upload/assets/bug2.jpg',
    analyseData: [{ num: 1, type: 1, name: '硬壳虫' }],
  },
])
defineExpose({ open })
</script>

<template>
  <Popup width="1200" height="928" ref="popup" title="虫情测报灯">
    <div class="flex-center">
      <div class="left">
        <div class="title">最新一次采集的图片：</div>
        <div class="content">
          <img class="img" :src="data[0]?.imagesUrl" alt="" />
        </div>
        <div class="title">
          最新一次识别数量：{{ data[0]?.analyseData[0]?.num || 0 }}
        </div>
        <div class="title">
          最新一次识别的种类数量：{{ data[0]?.analyseData[0]?.type || 0 }}
        </div>
        <div class="title">
          最新一次识别结果：{{ data[0]?.analyseData[0]?.name || '暂无昆虫' }}
        </div>
      </div>
      <div class="right">
        <div class="title">上一次采集的图片：</div>
        <div class="content">
          <img class="img" :src="data[1]?.imagesUrl" alt="" />
        </div>
        <div class="title">
          最新一次识别数量：{{ data[1]?.analyseData[0]?.num || 0 }}
        </div>
        <div class="title">
          最新一次识别的种类数量：{{ data[1]?.analyseData[0]?.type || 0 }}
        </div>
        <div class="title">
          最新一次识别结果：{{ data[1]?.analyseData[0]?.name || '暂无昆虫' }}
        </div>
      </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>
.left {
  width: 50%;
}
.right {
  width: 50%;
}
.content {
  margin-top: 20px;
  width: 500px;
  height: 500px;
  border: 1px solid #fff;
  .img {
    width: 100%;
    height: 100%;
  }
}
.title {
  font-size: 20px;
  color: #fff;
  margin-top: 20px;
}
</style>
